import { observer } from 'mobx-react-lite'
import { useRootStore } from '../../store'
import UnCompletedTodoCount from './UnCompletedTodoCount'

function Footer () {
  const { todoStore } = useRootStore()
  const { filterCondition, changeFilterCondition } = todoStore
  return (
    <footer className='footer'>
      <UnCompletedTodoCount />
      <ul className='filters'>
        <li>
          <button
            onClick={() => changeFilterCondition('All')}
            className={filterCondition === 'All' ? 'selected' : ''}
          >
            All
          </button>
        </li>
        <li>
          <button
            onClick={() => changeFilterCondition('Active')}
            className={filterCondition === 'Active' ? 'selected' : ''}
          >
            Active
          </button>
        </li>
        <li>
          <button
            onClick={() => changeFilterCondition('Completed')}
            className={filterCondition === 'Completed' ? 'selected' : ''}
          >
            Completed
          </button>
        </li>
      </ul>
      <button className='clear-completed'>Clear completed</button>
    </footer>
  )
}

export default observer(Footer)
